<template>
  <div class="profile_content">
    <MainNavBar>
      <template #goBack>
        <div class="home-nav-icon" @click="goBack">
          <i class="iconfont icon-jiantou"></i>
        </div>
      </template>
      <template #center-name> 个人中心 </template>
    </MainNavBar>
    <!-- <div class="content_C" :style> -->
    <div class="content_C">
      <div class="content_bg_a"></div>
      <div class="content_bg_b">
        <div class="user">
          <div class="user_img">
            <img v-if="userinfo.avatar" :src="userinfo.avatar" alt="" />
          </div>
          <div class="user_name">{{ userinfo.user_nickname }}</div>
        </div>
        <div class="project_li">
          <div class="project_a" @click="goMatch">
            <div class="project_left">
              <img src="http://qnticao.laigl.com/vue/bisai.png" alt="" />
            </div>
            <div class="project_center">我的参赛</div>
            <div class="project_right">
              <img src="http://qnticao.laigl.com/vue/youjt.jpg" alt="" />
            </div>
          </div>
          <div class="project_a" @click="goCertificate">
            <div class="project_left">
              <img
                src="http://qnticao.laigl.com/vue/1a9004c2394120b2ff0254dd8b4bc2d.png"
                alt=""
              />
            </div>
            <div class="project_center">我的证书</div>
            <div class="project_right">
              <img src="http://qnticao.laigl.com/vue/youjt.jpg" alt="" />
            </div>
          </div>
          <div class="project_a" @click="goMymovie">
            <div class="project_left">
              <img
                src="../../assets/images/95bed740768395b21a34fd17f771e4e.png"
                alt=""
              />
            </div>
            <div class="project_center">我的视频</div>
            <div class="project_right">
              <img src="http://qnticao.laigl.com/vue/youjt.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="project_bot" @click="getCall">
        <div class="project_left">
          <img src="http://qnticao.laigl.com/vue/kefu.png" alt="" />
        </div>
        <div class="project_bot-r">联系我们</div>
      </div>
    </div>
  </div>
  <!-- <div id="mask" v-if="show" @click="noShow"></div> -->
  <van-overlay id="mask"  :show="show" @click="noShow"  />
  <div class="call_phone"  v-if="show" >
    <div class="wrong" @click="noShow">
      <img src="http://qnticao.laigl.com/60bd15b43e82ee871bb84e64e3edcfe.png" alt="">
    </div>
      <div class="tip_phone">
        <div class="wx_box">
          <div class="phone" v-for="(item, index) in listData_l"
         :key="index" > 

          <img
                v-if="item"
                class="img"
                :src="item"
                alt="预览图片"
                @click="getImg(listData_l, index)"
              />
          <!-- <img src="../../assets/images/phone_5.jpg" alt=""> -->
          <p>咨询报名步骤</p> 
        </div>
        <div class="phone" v-for="(item, index) in listData_r"
         :key="index" >
            <img
                v-if="item"
                class="img"
                :src="item"
                alt="预览图片"
                @click="getImg(listData_r, indenx)"
              />  
          <p>咨询比赛详情</p>  
        </div>
        </div>
        
    </div>
    <div class="call_tip" v-if="show">
      <span class="title_name" >常见问题</span>
      <div class="main">
        <div class="question">
          <div class="question_t"><span class="question_name"> 1.怎么报名？</span></div> 
          <p>答：进入小程序首页，点击我要报名，按提示填写相关信息后支付，支付成功即报名成功。</p>
        </div>

        <div class="question">
          <div class="question_t"><span class="question_name"> 2.怎么上传视频？</span></div> 
           <p> 答：报名成功后，进入个人中心，查看报名信息，即可上传视频。</p>
        </div>

        <div class="question">
          <div class="question_t"><span class="question_name"> 3.怎么查看视频是否通过审核？</span></div> 
          <p> 答：(1)在小程序里的成绩查询可以查看。
         <br />(2)可以使用报名时的微信，在程序内个人中心-我的参赛查看。</p>
        </div>

        <div class="question">
         <div class="question_t"><span class="question_name">  4.怎么领取通级证书？</span></div> 
         <p>答：在小程序里的成绩查询可以看到。
          如需要下载证书，则需要用报名时的微信才可以下载证书。</p> 
        </div>

        <div class="question">
          <div class="question_t"><span class="question_name">  5.通级没过可以补考吗？</span></div> 
          <p>答：可以免费补考，需要再次上传补考视频。</p>
        </div>

        <div class="question">
          <div class="question_t"><span class="question_name"> 6.用护照号可以报名吗？</span></div> 
          <p>答：可以，护照号和参赛运动员姓名一致就可以，方便用来查询成绩。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { request } from "../../network/request";
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      show: false,
      userinfo:"",
      sign_phone:'18627291032',
      match_phone:'13601181845',
     listData_l:['http://qnticao.laigl.com/4acc3f7c1c979436ffe4c45e43fa3f9.jpg'],
     listData_r:['http://qnticao.laigl.com/a975a20583f8ffe896a84b8d0c22956.jpg'],
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    // 我的视频界面
    goMymovie(){
      this.$router.push({
        path:"/myvideo"
      })
    },
     getImg(images, index) {
      ImagePreview({
        images: images,
        showIndex: true,
        loop: false,
        startPosition: index
      });
    },
    noShow(){
      this.show = false
    },
    goBack() {
      this.$router.push("/index");
    },
    async getUserInfo() {
      try {
        const res = await request({
          url: "/v1/ucenter/getUserInfo",
          data: {
            //  token:sessionStorage.getItem('token')
            openid: sessionStorage.getItem("openid"),
          },
        });
        if (res.code == 200) {
          this.userinfo = res.data.row;
        }
      } catch (error) {}
    },
    getCall() {
      this.show = true;
    },
    goMatch() {
      this.$router.push("/mymatch");
    },
    goCertificate() {
      this.$router.push("/mycertificate");
    },
  },
  name: "Home",
  components: {
    MainNavBar,
  },
};
</script>
<style lang="less" scoped>
.wrong{
  position: absolute;
  right: 0;
  top: -9vw;
}
.content_bg_a {
  width: 83.2vw;
  height: 196vw;
  position: absolute;
  top: 7.2vw;
  background: url("http://qnticao.laigl.com/vue/juxing_1.png") no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}
.content_bg_b {
  width: 75.2vw;
  height: 190.4vw;
  position: absolute;
  top: 12.8vw;
  background: url("http://qnticao.laigl.com/vue/juxin_2.png") no-repeat;
  background-size: 100% 100%;
  z-index: 2;
}
.user {
  height: 21.333vw;
  position: absolute;
  top: -2.667vw;
  left: 13.333vw;
  display: flex;
  justify-content: center;
}
.user_img {
  width: 21.333vw;
  height: 21.333vw;
  border-radius: 50%;
  border: solid 1.001px white;
}
.user_img img {
  width: 21.333vw;
  height: 21.333vw;
  border-radius: 50%;
  box-shadow: 0vw 2.533vw 3vw #c3d8ea;
}
.user_name {
  width: 60vw;
  height: 8.333vw;
  line-height: 8.333vw;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 5.6vw;
  font-family: PingFangSC-Semibold;
  line-height: 7.733vw;
  text-align: left;
  overflow: hidden;
  margin-top: 6.933vw;
  margin-left: 0.533vw;
  padding-left: 2.667vw;
}
.project_li {
  position: absolute;
  top: 30.333vw;
  left: 16vw;
}
.project_a {
  height: 16vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project_left img {
  width: 6.933vw;
  height: 6.933vw;
}
.project_center {
  /* width: 19.2vw; */
  flex: 1;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 4.8vw;
  font-family: PingFangSC-Regular;
  line-height: 6.667vw;
  text-align: left;
  margin-left: 1.067vw;
  margin-right: 7.467vw;
}
.project_right img {
  width: 3.467vw;
  height: 3.467vw;
}
.project_bot {
  height: 10.667vw;
  /* width: 32vw; */
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 7.467vw;
  right: 15.467vw;
  display: flex;
  z-index: 3;
}
.project_bot img {
  width: 8vw;
  height: 8vw;
}
.project_bot-r {
  /* width: 19.2vw; */
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 4.8vw;
  font-family: PingFangSC-Regular;
  line-height: 8vw;
  text-align: left;
  margin-left: 3.467vw;
}
#mask {
  z-index: 1999;
  /* display: none; */
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  /* backdrop-filter: blur(25px); */
  /* filter: blur(30px); */
  /* box-shadow: inset 30px 30px 30px 30px; */
  position: fixed;
  top: 0;
  left: 0;
}
.call_phone {
  z-index: 2000;
  width: 88vw;
  position: fixed;
  top: 30vw;
  left: 0;
  margin: 0 5%;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 2.667vw;
}
.tip_phone {
  width: 100%;
  height: 160px;
  background: url(../../assets/images/wxBgc.png) no-repeat;
  background-size: 100% auto;
  box-shadow: 0 0.267vw 4vw #827a7aa3
}
.wx_box{
    display: flex;
    margin: 0 auto;
    width: 66.667vw;
    padding-top: 2.667vw;
    p{
      margin: 0;
      color: #0054a6;
    }
}
.phone {
  position: relative;
  margin: 0 auto;
  border-radius: 6.667vw;
  margin-bottom: 5.333vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* color: rgba(255, 255, 255, 1); */
  color: #000;
}
.phone img {
  width: 30.133vw;
}
.call_tip {
  color: rgba(0, 0, 0, 1);
  position: relative;
  .title_name{
    display: block;
    width: 26.667vw;
    height:9.6vw;
    line-height: 9.6vw;
    color: #fff;
    background:url(../../assets/images/quesWx.png) no-repeat;
    background-size: 100% auto;
    padding-left: 5.333vw;
    font-size: 4.8vw;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    z-index: 1;
  }
  .question{
    font-size: 4.8vw;
    padding-top: 2.133vw;
    margin-bottom: 2.667vw;
    p{
       margin: 0;
       padding: 0 5.333vw;
       font-size: 3.733vw;
       line-height: 5.333vw;
       letter-spacing: 0.213vw;
     }
  }
  .question_t{
    height: 4vw;
    display: inline-block;
    background-color: #fccf00; 
     transform: skew(-20deg);
     margin-left: 2.667vw;
     .question_name{
       display: inline-block;
       transform: skew(20deg) translateY(-2.667vw);
       font-size: 4.267vw;
       font-weight: 600;
       padding-left: 2.667vw;
     }
     
  }
  
  .main{
    height: 80vw;
    padding-bottom: 13.333vw;
    overflow-y: scroll;
    padding-top: 13.333vw;
    box-sizing: border-box;
  }
}
</style>